<template>
  <!-- 用户信息 -->
  <div class="myInfo">
    <!-- 背景 -->
    <div class="picture">
      <!-- <img
        src="https://www.lwjppz.cn/upload/2021/01/IMG_20201206_155135-7d3d5917705b472d85b5871d6ed721b3.jpg"
        alt=""
      /> -->
      <!-- 头像 -->
      <div class="via">
        <img
          :src="userInfo.avatar"
          :title="userInfo.account"
          v-if="userInfo.avatar"
        />
        <img
          src="../../state/img/login01.jpg"
          :title="userInfo.account"
          v-else
        />
      </div>
    </div>
    <!-- 用户信息等 -->
    <div class="info">
      <!-- 用户名 签名-->
      <div class="userInfo">
        <span v-if="this.userInfo.account">{{ userInfo.nickname }}</span>
        <span v-else>未登录</span>
        <p :title="userInfo.autograph">{{ userInfo.autograph }}</p>
      </div>
      <!-- 数量 标签等 -->
      <ul>
        <li>
          <span class="num">{{ tagNum }}</span>
          <span class="txt">标签数</span>
        </li>
        <li>
          <span class="num">{{ articleNum }}</span>
          <span class="txt">文章数</span>
        </li>
        <li>
          <span class="num">{{ leaveNum }}</span>
          <span class="txt">留言数</span>
        </li>
      </ul>
      <!--  icon 分享 -->
      <div class="share">
        <a href="javascript:;" class="iconfont">&#xe6ca;</a>
        <a href="javascript:;" class="iconfont">&#xe607;</a>
        <a href="javascript:;" class="iconfont">&#xe641;</a>
        <a href="javascript:;" class="iconfont">&#xe666;</a>
        <a href="javascript:;" class="iconfont">&#xe61a;</a>
        <a href="javascript:;" class="iconfont">&#xe885;</a>
      </div>
    </div>
  </div>
</template>

<script>
  import { getUserInfo } from '../../api/getUser.js';
  import { tagAll } from '../../api/tags.js';
  import { postArticlei } from '../../api/articlei.js';
  import { postLeaveCom } from '../../api/leave.js';
  export default {
    // name: 'MyInfo',
    data() {
      return {
        loginSate: true, // 判断 是否登录
        userInfo: {},
        tagNum: 0, // 标签数
        articleNum: 0, //文章数
        leaveNum: 0, //留言数
      };
    },

    methods: {
      async getUserInfo() {
        const { data: res } = await getUserInfo(localStorage.getItem('token'));
        if (res) {
          this.userInfo = res.data;
        }
      },
      //  获取标签数
      async getTags() {
        const { data: res } = await tagAll(localStorage.getItem('token'));
        if (res) {
          this.tagNum = res.data.length;
        }
      },
      // 获取 文章数
      async getArticle() {
        const { data: res } = await postArticlei(
          '/es/pageQueryArticle',
          0,
          9999,
        );
        this.articleNum = res.data.length;
      },
      // 获取留言数
      async getLeave() {
        const { data: res } = await postLeaveCom();
        console.log(res.data.length);
      },
    },
    created() {
      this.getUserInfo();
      this.getTags();
      this.getArticle();
      this.getLeave();
    },
  };
</script>

<style lang="less" scoped>
  @import url('../../state/css/register/myInfo.less');
</style>
